<template>
	<view class="banner_container">
		<view class="create_box" v-if="!ImageData">
			<sp-html2canvas-render domId="main" @renderOver="renderOver" ref="can">
				<view class="main" id="main">
					<view class="photo_box">
						<img v-if="posterBg" class="poster" :src="posterBg" mode=""></img>
					</view>
					
					<view class="photo-content">
						<view class="photo-code">
							<img  v-if="qrcode" class="qrcode" :src="qrcode" mode=""></img>
						</view>
						<view class="photo-text">
							<view>微信扫一扫</view>
							<view>查看店铺更多精彩内容</view>
						</view>
					</view>
					
				</view>
			
		
			</sp-html2canvas-render>
		</view>
		
	 
		
		<image v-else :src="ImageData" mode="widthFix" style="width: 100%;"></image>
		
		<view class="buttom-btn">
			<view class="btn btn-2" @click="copyText">复制链接</view>
			<view class="btn" @click="saveTo">生成海报</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posterBg: "",
				qrcode: "",
				share_url: "",
				
				packages_id: "",
				info: {},
				ImageData: "",
				imgBase64: "",
				
				originBase64: "",
				user_info:[]
			}
		},
		onLoad( e ) {
			if ( e.id ) {
				this.id = e.id
			}
			if (e.packages_id) {
				this.packages_id = e.packages_id
				this.getInfo()
			}
			
		},
		onShow() {
			this.getQrCode()
		},
		methods: {
			
			/**
			 * 获取二维码
			 */
			getQrCode () {
				uni.showLoading({
					mask:true,
					title:"海报生成中.."
				})
				let { id } = this 
				this.$httpApi.GetExtendqrcode().then( res => {
					if ( res && res.code == 1 ) {
						this.$httpApi.ImageToBase64({image: res.data.bg})
						.then( base => {
							this.posterBg = "data:image/png;base64,"+ base.data
							
							this.$httpApi.ImageToBase64({image: res.data.qrcode})
							.then( base => {
								this.qrcode = "data:image/png;base64,"+ base.data
								
								setTimeout(() => {
									 this.$refs.can.h2cRender.renderDom();
									 uni.hideLoading()
								}, 500)
							})
						})
						
						// this.posterBg = res.data.bg
						// this.qrcode = res.data.qrcode
						this.share_url = res.data.share_url
					}
				})
				
				
			},
			
			/**
			 * 图片数据
			 */
			renderOver( e ) {
				// console.log( e );
				if ( e ) {
					 this.ImageData = e
				}
			},
			
			/**
			 * 保存到本地相册
			 * @param {Object} image
			 */
			saveTo(imgbase64url) {
				uni.showModal({
					content: '海报已生成，请长按图片保存海报！'
				});
				// 创建一个链接元素
				// const link = document.createElement('a');
				// link.href = imgbase64url;
				// link.download = 'image.png'; // 设置下载文件名
				
				// // 点击链接来触发下载
				// link.click();
				
				// uni.navigateTo({
				//   url: '/pages/order/ShowBanner',
				//   success: () => {
				//     setTimeout(() => {
				//       uni.$emit('e_baseimg', imgbase64url)
				//     }, 600)
				//   }
				// })

			},

			/**
			 * 将远程图片转base64
			 * @param {Object} image 图片链接
			 */
			getImagesBase64( image ) {
				this.$httpApi.ImageToBase64({image})
				.then( res => {
					this.imgBase64 = "data:image/jpeg;base64,"+ res.data
				})
			},	
			// 复制
			copyText() {
				uni.setClipboardData({
					data: this.share_url,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.banner_container {
		width: 100%;
		
		.buttom-btn {
			width: 100%;
			position: fixed;
			bottom: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			
			.btn {
				width: 280rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-color: #2758f1;
				color: #fff;
				text-align: center;
			}
			
			.btn-2 {
				background-color: #fff;
				color: #2758f1;
				border: 1rpx solid #2758f1;
			}
		}
		
		.create_box {
			opacity: 0;
		}
		// padding-top: var(--window-top);
		.main {
			width: 100%;
			height: 1400rpx;
			background: url('@/static/images/index/posterBg.jpg') center no-repeat;
			background-size: cover;
			padding-top: 30rpx;
			
			.photo_box {
				width: 750rpx;
				// height: 750rpx;
				// padding: 30rpx;
				// background-color: rgb(94, 184, 136);
				// position: relative;
				// left: 0;
				// top: 0;
				.poster {
					width: 750rpx;
					// height: 750rpx;
					// position: absolute;
					// left: 0;
					// top: 0;
				}
				
			}
			
			.photo-content {
				display: flex;
				padding: 30rpx;
				background-color: rgba(255, 255, 255, 0.2);
				margin: 30rpx;
				border-radius: 30rpx;
				
				.photo-code {
					width: 240rpx;
					height: 240rpx;
				}
				
				.photo-text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 30rpx;
					color: #010101;
					font-size: 34rpx;
				}
			}
			
			.content {
				width: 100%;
				display: flex;
				.left {
					flex: 1.5;
					padding: 20rpx;
					.info_item {
						width: 100%;
						// display: flex;
						// align-items: flex-start;
						padding: 10rpx 0;
						.label {
							// width: 100rpx;
							font-weight: bold;
						}
						.val {
							// width: 300rpx;
							color: #999;
						}
					}
				}
				.right {
					flex: 1;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.txt {
						line-height: 60rpx;
					}
					.qrcode {
						width: 200rpx;
						height: 200rpx;
						image {
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
			}
		}
		
		.btn_box {
			width: 100%;
			padding: 20rpx;
			text-align: center;
			display: flex;justify-content: center;
			.abtn {
				width: 500rpx;
			}
		}
	}
</style>